<template>
    <el-form
      ref="ruleFormRef"
      style="max-width: 600px"
      :model="ruleForm"
      :rules="rules"
      label-width="auto"
      class="demo-ruleForm"
      :size="formSize"
      status-icon
    >
      <el-form-item label="账号" prop="username">
        <el-input v-model="ruleForm.username" />
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input type="password" v-model="ruleForm.password" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm(ruleFormRef)">
          登录
        </el-button>
        <el-button @click="resetForm(ruleFormRef)">重置</el-button>
      </el-form-item>
    </el-form>
  </template>
  
  <script lang="ts" setup>
  import { reactive, ref } from 'vue'
  import {Login} from "../../api"
  import type { ComponentSize, FormInstance, FormRules } from 'element-plus'
  import {useRouter} from "vue-router"
  import {set} from "../../utils/session.ts"
  const router=useRouter()
//   interface RuleForm {
//     name: string
//     region: string
//     count: string
//     date1: string
//     date2: string
//     delivery: boolean
//     location: string
//     type: string[]
//     resource: string
//     desc: string
//   }
  
  const formSize = ref<ComponentSize>('default')
  const ruleFormRef = ref<FormInstance>()// 表单实例
  const ruleForm = reactive<UserInfo>({// 表单数据
    username: 'admin',
    password:'123456'
  })
  
  
  const rules = reactive<FormRules<UserInfo>>({
    username: [
      { required: true, message: '请输入账号', trigger: 'blur' },
      { min: 3, max: 15, message: '账号字符3到15', trigger: 'blur' },
    ],
    password:[
      { required: true, message: '请输入密码', trigger: 'blur' },
    ],
 
  })
  
  const submitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate(async (valid, fields) => {
      if (valid) {// 验证成功
        // console.log('submit!')
        let res:any=await Login(ruleForm)
        console.log(res);
        // 存用户信息和token
        set('userinfo',res.data)
        set("token",res.token)
        router.push("/layout")
        
      } else {
        console.log('error submit!', fields)
      }
    })
  }
  
  const resetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.resetFields()
  }
  

  </script>